<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Mermaid Quick Test Page</title>
	<link rel="icon" type="image/png" href="">
	<style>
		div.mermaid {
			/* font-family: 'trebuchet ms', verdana, arial; */
			font-family: 'Courier New', Courier, monospace !important;
		}
	</style>
</head>

<body>


	<div class="mermaid">
		sequenceDiagram
		title: FancySequenceDiagram
		accDescription Test a description
		participant Alice
		participant Bob
		participant John as John<br />Second Line
		autonumber 10 10
		rect rgb(200, 220, 100)
		rect rgb(200, 255, 200)
		Alice ->> Bob: Hello Bob, how are you?
		Bob-->>John: How about you John?
		end
		Bob--x Alice: I am good thanks!
		Bob-x John: I am good thanks!
		Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
		Bob-->Alice: Checking with John...
		Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
		Bob-x John: Hey John - we're still waiting to know<br />how you're doing
		Note over John:nowrap: John's trying hard not to break his train of thought.
		Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
		Note over John: After a few more moments, John<br />finally snaps out of it.
		end
		autonumber off
		alt either this
		Alice->>+John: Yes
    John-->>-Alice: OK
		else or this
		autonumber
		Alice->>John: No
		else or this will happen
		Alice->John: Maybe
		end
		autonumber 200
		par this happens in parallel
		Alice -->> Bob: Parallel message 1
		and
		Alice -->> John: Parallel message 2
		end
	</div>

	<script src="./mermaid.js"></script>
	<script>
		mermaid.initialize({
		  theme: 'forest',
		  // themeCSS: '.node rect { fill: red; }',
		  logLevel: 3,
		  securityLevel: 'loose',
		  flowchart: { curve: 'basis' },
		  gantt: { axisFormat: '%m/%d/%Y' },
		  sequence: { actorMargin: 50 },
		  // sequenceDiagram: { actorMargin: 300 } // deprecated
		});
	</script>

</body>

</html>
